<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script th:src="@{/qinjiang/js/echarts.min.js}"></script>
<link th:href="@{/qinjiang/css/mycss.css}" rel="stylesheet">
<head>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div th:replace="index::headdiv"></div>
<div id="main" style="height: 600px; width: 100%"></div>
<div th:replace="index::personal"></div>
<script>

    $("#btn_add").click(function () {
        $('#myModal').modal();  //弹出
        $.getJSON("/getUser", function (user) {
            $("#txt_statu").val(user.id);
            $("#txt_departmentname").val(user.name);
            $("#txt_parentdepartment").val(user.password);
            $("#txt_departmentlevel").val(user.role);
        });
    });

    //保存按钮
    $("#btn_submit").click(function () {
        id = $("#txt_statu").val();
        name = $("#txt_departmentname").val();
        password = $("#txt_parentdepartment").val();
        role = $("#txt_departmentlevel").val();
        $.getJSON("/updateUser", {id: id, name: name, password: password, role: role}, function (status) {
            if (!status) {
                alert("失败")
            } else {
                doList();
            }
        })
    });
    var cfid = getQueryVariable("id");
    async:false;
    setInterval(function () {
        // 折线图
        var xdate;
        var ydate;
        $.ajax({
            url: "/getcfTimeDate",
            data: {"id": cfid},
            type: 'GET',
            success: function (data) {
                xdate = data;
                $.ajax({
                    url: "/getcfNumDate",
                    data: {"id": cfid},
                    type: 'GET',
                    success: function (data) {
                        ydate = data;
                        hrFun(xdate, ydate);
                    },
                });
            },
        });

        // $.ajax({
        //     url: "/getcfNumDate",
        //     data: {},
        //     type: 'GET',
        //     success: function (data) {
        //         ydate = JSON.stringify(data);
        //         // hrFun(xdate, ydate);
        //     },
        // });
        //
    }, 2000);

    // 心率
    var hrChart = echarts.init(document.getElementById("main"));

    function hrFun(x_data, y_data) {
        hrChart.setOption({
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            title: {
                text: cfid+"号节点燃气浓度折线图",
                left: "center",
            },
            legend: {
                data: ['心率值']
            },
            grid: {
                left: '3%',
                right: '3%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: [{
                name: '时间',
                type: 'category',
                data: x_data,
            }],
            yAxis: [{ // 纵轴标尺固定
                type: 'value',
                scale: true,
                name: '浓度(%)',
                min: 0, // 就是这两个 最小值
                max: 'dataMax', // 最大值
                splitNumber: 20,
                boundaryGap: [0.2, 0.2]
            }],
            series: [{
                name: '浓度',
                type: 'line',
                data: y_data
            }]
        }, true);
    }

    //获取地址栏参数
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){
                return pair[1];
            }
        }
        return(false);
    }
</script>
</body>
</html>

